<script context="module">
  export const prerender = true;
  import Counter from "$lib/Counter.svelte";
  import Greeter from "$lib/Greeter.svelte";
</script>

<svelte:head>
  <title>Home</title>
</svelte:head>

<div
  class="w-full flex flex-col items-center justify-center p-4 bg-gray-300 lg:flex-row lg:h-196"
>
  <div class="flex flex-col items-center w-full lg:w-1/2 py-4 ">
    <div class="max-w-lg">
      <h1 class="text-left text-3xl tracking-wide text-gray-800 lg:text-4xl">
        How many English words have you mastered
      </h1>
      <p class="mt-4 text-black-600">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut quia
        asperiores alias vero magnam recusandae adipisci ad vitae laudantium
        quod rem voluptatem eos accusantium cumque.
      </p>
      <div class="mt-6 items-center justify-center ">
        <a
          href="#"
          class="block px-3 py-2 font-semibold text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400"
        >
          Check My English Words Now
        </a>
      </div>
    </div>
    <div class="max-w-lg mt-8 ">
      <h1 class="text-left text-3xl tracking-wide text-gray-800 lg:text-4xl">
        How many Chinese words have you mastered
      </h1>
      <p class="mt-4 text-black-600">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut quia
        asperiores alias vero magnam recusandae adipisci ad vitae laudantium
        quod rem voluptatem eos accusantium cumque.
      </p>
      <div class="mt-6 items-center justify-center ">
        <a
          href="#"
          class="block px-3 py-2 font-semibold text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400"
        >
          Check My Chinese Words Now
        </a>
      </div>
    </div>
  </div>

  <div class="flex items-center justify-center w-full lg:w-1/2 ">
    <!-- svelte-ignore a11y-img-redundant-alt -->
    <img
      class="object-cover w-full h-auto rounded-md"
      src="ebbinghaus-curve.png"
      alt="apple watch photo"
    />
  </div>
</div>

<div
  class="w-full flex flex-col items-center justify-center pl-4 pb-4 pr-4 bg-gray-300 lg:flex-row "
>
  <div class="flex flex-col  items-center w-full pb-4  lg:w-1/2 ">
    <div class="max-w-lg ">
      <h1 class="text-left text-3xl tracking-wide text-gray-800 lg:text-4xl">
        What is EBP (Ebbinghaus Programme)
      </h1>
      <p class="mt-4 text-black-600 mb-4">
        Ebbinghaus’ Forgetting Curve, or simply ‘The Forgetting Curve’, shows
        how information is lost over time when you don’t try to retain it.
      </p>
      <h2
        class="text-left text-2xl tracking-wide text-gray-800 lg:text-3xl mt-4"
      >
        Reinforce the training regularly
      </h2>
      <p class="mt-4 text-black-600">
        Ebbinghaus discovered that information is easier to recall when it’s
        built upon things you already know. Every time you reinforce the
        training, the rate of decline reduces. The testing effect says that by
        simply testing a person’s memory, that memory will become stronger.
        Staging frequent training interventions as part of a learning campaign
        helps solidify the information through active recall.
        <a
          href="https://www.growthengineering.co.uk/what-is-the-forgetting-curve/"
          class="text-blue-500"
        >
          More...
        </a>
      </p>
      <p class="mt-4 text-black-600">
        So here is EBP that embeds space repetition algorithm to schedule the
        memory tasks for you automatically.
      </p>
    </div>
  </div>

  <div class="flex items-center justify-center w-full lg:w-1/2 mt-4">
    <!-- svelte-ignore a11y-img-redundant-alt -->
    <img
      class="object-cover w-full h-auto rounded-md"
      src="ebbinghaus-combating.png"
      alt="apple watch photo"
    />
  </div>
</div>

<section class="bg-gray-50">
  <h1>
    <div class="welcome items-center text-center">
      <picture class="text-center items-center">
        <source srcset="svelte-welcome.webp" type="image/webp" />
        <img src="svelte-welcome.png" alt="Welcome" />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

  <Counter />

  <h2 class="bg-blue-700">Greeter Header</h2>
  <Greeter />
</section>

<style>
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  h1 {
    width: 100%;
  }

  .welcome {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0 0 calc(100% * 1495 / 2048) 0;
  }

  .welcome img {
    position: absolute;
    width: 90%;
    height: 100%;
    top: 0;
    display: block;
  }
</style>
